<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="./js/html5.min.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->

    <script>
        var baseUrl = parent.baseUrl;
        var env = $.getUrlParam("env");
        var gateway = $.getUrlParam("gateway");


        var likeComment = $.getUrlParam("likeComment");
        if (!likeComment) {
            likeComment = "";
        } else {
            likeComment = encodeURI(likeComment);
        }

        var status = $.getUrlParam("status");
        var progress = $.getUrlParam("progress");
        var filterType = $.getUrlParam("filterType");
        if (!status || status == 'null') {
            status = '';
        }
        if (!progress || progress == 'null') {
            progress = '';
        }
        if (!filterType || filterType == 'null') {
            filterType = '';
        }

        $(function () {
            $("#l_like_comment").val(decodeURI(decodeURI(likeComment)));
            $("#l_status").find("option[value='" + status + "']").attr("selected", "");
            $("#l_progress").find("option[value='" + progress + "']").attr("selected", "");
            $("#l_filter_type").find("option[value='" + filterType + "']").attr("selected", "");
        });

    </script>
</head>

<body class="layui-anim layui-anim-up">
<div class="x-nav">
       <span class="layui-breadcrumb">
        <a href="javascript:;">首页</a>
        <a href="javascript:;">网关管理</a>
        <a>
          <cite>过滤器配置</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md8 x-so">
            <div class="layui-input-inline">
                <select name="progress" id="l_progress">
                    <option value="">发布进度</option>
                    <option value="-1">未发布</option>
                    <option value="2">灰度</option>
                    <option value="1">已发布</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="status" id="l_status">
                    <option value="">状态</option>
                    <option value="1">已启用</option>
                    <option value="0">已停用</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="filterType" id="l_filter_type">
                    <option value="">过滤器类型</option>
                    <option value="pre">pre</option>
                    <option value="route">route</option>
                    <option value="post">post</option>
                    <option value="error">error</option>
                </select>
            </div>
            <input type="text" id="l_like_comment" name="likeComment" placeholder="请输入备注" autocomplete="off"
                   class="layui-input">

            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>

        <div class=" layui-col-md4 x-so">
            <button class="layui-btn" onclick="openDbSourceEdit()"><i class="layui-icon">&#xe642;</i>修改数据源
            </button>
            <button class="layui-btn" onclick="openGlobalConfigEdit()"><i class="layui-icon">&#xe614;</i>全局配置
            </button>
            <button class="layui-btn" onclick="openRouteConfig()"><i class="layui-icon">&#xe674;</i>路由功能
            </button>
            <button class="layui-btn" onclick="openHystrix()"><i class="layui-icon">&#xe629;</i>断路器监控
            </button>
        </div>
    </div>
    <xblock>
        <button class="layui-btn" onclick="openAddWin()"><i
                class="layui-icon">&#xe608;</i>添加
        </button>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>名称</th>
            <th>过滤器ID</th>
            <th>过滤器名称</th>
            <th>版本</th>
            <th>过滤器代码</th>
            <th>过滤器类型</th>
            <th>禁用属性名称</th>
            <th>过滤器优先级</th>
            <th>创建时间</th>
            <th>备注</th>
            <th>发布进度</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="gatewayFilterListView">

        </tbody>
    </table>

</div>

<script>
    function openAddWin() {
        x_admin_show('添加过滤器', './gateway-filter-add.html?env=' + env + "&gateway=" + gateway);
    }

    function openEditWin(id) {
        x_admin_show('编辑', 'gateway-filter-edit.html?env=' + env + "&gateway=" + gateway + "&id=" + id);
    }

    function openDbSourceEdit() {
        x_admin_show('修改数据源', 'gateway-dbsource-edit.html?env=' + env + "&gateway=" + gateway, 600, 400);
        return false;
    }

    function openGlobalConfigEdit() {
        x_admin_show('配置网关全局属性', 'gateway-global-config-edit.html?env=' + env + "&gateway=" + gateway);
        return false;
    }

    function openRouteConfig() {
        x_admin_show('路由功能', 'gateway-route-tool.html?env=' + env + "&gateway=" + gateway);
        return false;
    }

    function openHystrix() {
        if (!baseUrl.endsWith("/")) {
            baseUrl += "/";
        }

        x_admin_show('断路器监控', 'gateway-hystrix.html?env=' + env + "&gateway=" + gateway);
        return false;
    }


</script>

<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;


        form.on('switch(switchCanaryStatus)', function (data) {
            // layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
            //     offset: '6px'
            // });

            if (this.checked) {
                layer.tips('温馨提示：灰度过滤器开关已打开，所有灰度过滤器将启用', data.othis);
            } else {
                layer.tips('温馨提示：灰度过滤器开关已关闭，所有灰度过滤器将停用', data.othis);
            }

        });

        //监听提交
        form.on('submit(sreach)', function (data) {
            var likeComment = $.trim(data.field.likeComment);
            if (likeComment) {
                likeComment = encodeURI(encodeURI(likeComment));
            }

            var status = data.field.status;
            var progress = data.field.progress;
            var filterType = data.field.filterType;

            // console.info(data.field)

            var url = "./gateway-filter-list.html?likeComment=" + likeComment + "&env=" + env + "&gateway=" + gateway + "&status=" + status + "&progress=" + progress + "&filterType=" + filterType;
            window.location.href = url;
            return false;
        });

    });
</script>

<script>
    layui.use(['laytpl', 'layer'], function () {
        var laytpl = layui.laytpl;
        var layer = layui.layer;

        var likeComment = $.getUrlParam("likeComment");
        if (!likeComment) {
            likeComment = "";
        } else {
            likeComment = encodeURI(likeComment);
        }

        var gatewaySourceExist = false;

        var gatewaySourceReq = {
            request: {
                env: env, serviceGatewayName: gateway
            }
        };

        $.ajax({
            url: baseUrl + "/servcieGateway/dbSource/detail",
            data: JSON.stringify(gatewaySourceReq),
            contentType: 'application/json;charset=utf-8',
            dataType: "JSON",
            async: false,
            type: "POST",
            success: function (respData) {
                if (respData.respCode === '0000') {
                    if (respData.data) {
                        gatewaySourceExist = true;
                    }
                } else {
                    layer.msg(respData.respDesc, {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        //do something
                    });
                }
            }
        });

        if (!gatewaySourceExist) {
            x_admin_show('添加数据源', 'gateway-dbsource-add.html?env=' + env + "&gateway=" + gateway, 600, 400);
            return;
        }

        $.ajax({
            url: baseUrl + "/servcieGateway/filter/list?likeComment=" + likeComment + "&env=" + env + "&gateway=" + gateway + "&status=" + status + "&progress=" + progress + "&filterType=" + filterType,
            data: "",
            contentType: 'application/json;charset=utf-8',
            dataType: "JSON",
            // async: false,
            type: "GET",
            timeout: 10000,
            success: function (respData) {
                if (respData.respCode === '0000') {
                    var data = {
                        "list": respData.data.items
                    };

                    var getTpl = gatewayFilterListViewScript.innerHTML
                        , view = document.getElementById('gatewayFilterListView');
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                    });
                } else {
                    layer.msg(respData.respDesc, {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        //do something
                    });
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if (textStatus == "timeout") {
                    var inx = layer.alert("加载超时，服务器正常的情况下，请检查数据源配置是否正确!", {icon: 2}, function () {
                        layer.close(inx);
                    });
                } else {
                    // alert(textStatus);
                }
            }
        });
    });
</script>


<script>

    /*过滤器-停用、启用*/
    function filter_stop(obj, id) {
        var msg = "启用";
        if ($(obj).attr('title') == '启用') {
            msg = "停用";
        }

        layer.confirm('确认要' + msg + '吗？', function (index) {
            var newStatus = 0;
            if ($(obj).attr('title') == '启用') {
                newStatus = 0;
            } else {
                newStatus = 1;
            }
            var id = $.trim($(obj).closest("tr").find("td:first-child").text());
            // var filterCode = $.trim($(obj).closest("tr").find(".td-filter-code").find('p').text());

            var reqData = {
                request: {
                    status: newStatus, id: id
                }
            };

            $.ajax({
                url: baseUrl + "/servcieGateway/filter/update?env=" + env + "&gateway=" + gateway,
                data: JSON.stringify(reqData),
                contentType: 'application/json;charset=utf-8',
                dataType: "JSON",
                async: false,
                type: "POST",
                success: function (respData) {
                    if (respData.respCode === '0000') {
                        if ($(obj).attr('title') == '启用') {

                            //发异步把用户状态进行更改
                            $(obj).attr('title', '停用')
                            $(obj).find('i').html('&#xe62f;');

                            $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                            layer.msg('已停用!', {icon: 4, time: 1000});

                        } else {
                            $(obj).attr('title', '启用')
                            $(obj).find('i').html('&#xe601;');

                            $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').addClass('layui-btn-normal').html('已启用');
                            layer.msg('已启用!', {icon: 6, time: 1000});
                        }
                    } else {
                        layer.msg(respData.respDesc, {
                            icon: 2,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            //do something
                        });
                    }
                }
            });

        });
    }

    /*过滤器-删除*/
    function filter_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {

            $.ajax({
                url: baseUrl + "/servcieGateway/filter/delete/" + id + "/?env=" + env + "&gateway=" + gateway,
                data: "",
                contentType: 'application/json;charset=utf-8',
                dataType: "JSON",
                async: false,
                type: "GET",
                success: function (respData) {
                    if (respData.respCode === '0000') {
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!', {icon: 1, time: 1000});
                    } else {
                        layer.msg(respData.respDesc, {
                            icon: 2,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            //do something
                        });
                    }
                }
            });

        });
    }

    function filter_config(obj, filterId) {
        x_admin_show('配置过滤器属性', 'gateway-filter-config-edit.html?env=' + env + "&gateway=" + gateway + "&filterId=" + filterId);
    }

</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>


<script id="gatewayFilterListViewScript" type="text/html">
    {{# layui.each(d.list, function(index, item){ }}

    <tr>
        <td hidden> {{ item.id }}</td>
        <td>{{ item.applicationName }}</td>
        <td>{{ item.filterId }}</td>
        <td>{{ item.filterName }}</td>
        <td>{{ item.revision }}</td>
        <td class="td-filter-code"><a href="javascript:;" style="color: blue;" onclick="showFilterCode(this)">详细
            <p hidden>
                {{ item.filterCode }}
            </p></a></td>
        <td>{{ item.filterType }}</td>
        <td>{{ item.disablePropertyName }}</td>
        <td>{{ item.filterOrder }}</td>
        <td>{{ item.createTime }}</td>
        <td>{{ item.comment }}</td>


        {{# if(item.progressCode === -1){ }}
        <td class="td-progress">
            <span class="layui-btn layui-btn-primary layui-btn-sm">{{ item.progressDesc }}</span>
        </td>
        {{# } }}

        {{# if(item.progressCode === 2){ }}
        <td class="td-progress">
            <span class="layui-btn layui-btn-warm layui-btn-sm">{{ item.progressDesc }}</span>
        </td>
        {{# } }}

        {{# if(item.progressCode === 1){ }}
        <td class="td-progress">
            <span class="layui-btn layui-btn-normal layui-btn-sm">{{ item.progressDesc }}</span>
        </td>
        {{# } }}


        {{# if(item.statusCode === 0){ }}
        <td class="td-status">
            <span class="layui-btn layui-btn-disabled layui-btn-sm">{{ item.statusDesc }}</span>
        </td>
        {{# } }}


        {{# if(item.statusCode === 1){ }}
        <td class="td-status">
            <span class="layui-btn layui-btn-normal layui-btn-sm">{{ item.statusDesc }}</span>
        </td>
        {{# } }}

        {{# if(item.statusCode === -1){ }}
        <td class="td-status">
            <span class="layui-btn layui-btn-warm layui-btn-sm">{{ item.statusDesc }}</span>
        </td>
        {{# } }}


        {{# if(item.statusCode === 3){ }}
        <td class="td-status">
            <span class="layui-btn layui-btn-danger layui-btn-sm">{{ item.statusDesc }}</span>
        </td>
        {{# } }}


        <td class="td-manage">

            {{# if(item.statusCode === 1){ }}
            <a onclick="filter_stop(this,'10001')" href="javascript:;" title="启用">
                <i class="layui-icon">&#xe601;</i>
            </a>
            {{# } }}

            {{# if(item.statusCode === 0){ }}
            <a onclick="filter_stop(this,'10001')" href="javascript:;" title="停用">
                <i class="layui-icon">&#xe62f;</i>
            </a>
            {{# } }}


            <a title="编辑" onclick="openEditWin('{{ item.id }}')" href="javascript:;">
                <i class="layui-icon">&#xe642;</i>
            </a>
            <a title="删除" onclick="filter_del(this,'{{ item.id }}')" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
            </a>
            <a title="配置" onclick="filter_config(this,'{{ item.filterId }}')" href="javascript:;">
                <i class="layui-icon">&#xe614;</i>
            </a>
        </td>
    </tr>

    {{# }); }}
</script>
<script>
    function showFilterCode(_this) {

        var filterCode = '<pre class="layui-code">' + $(_this).find("p").html() + '</pre>';
        layer.open({
            type: 1,
            area: [($(window).width() * 0.9) + 'px', ($(window).height() - 50) + 'px'],
            fix: false, //不固定
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: "代码详情",
            content: filterCode
        });
    }
</script>

</html>